<template>
  <div id="app">
    <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        background-color="#f5f5f5"
        text-color="#2c3e50"
        active-text-color="#42b983"
        router
    >
      <el-menu-item index="/">首页</el-menu-item>
      <el-menu-item index="/shop">汉服商城</el-menu-item>
      <el-menu-item index="/knowledge">历史知识</el-menu-item>
      <el-menu-item index="/cart">购物车</el-menu-item>
      <el-menu-item index="/contract">联系我们</el-menu-item>
      <el-menu-item index="/login">登录/注册</el-menu-item>
    </el-menu>
    <div class="block">
      <el-carousel>
        <el-carousel-item v-for="(banner, index) in banners" :key="index">
          <img :src="require(`./assets/${banner}`)" alt="Banner Image">
        </el-carousel-item>
      </el-carousel>
    </div>
    <router-view/>
    <Footer/>
  </div>
</template>

<script>
import Footer from "@/components/footer.vue";

export default {
  components: { Footer },
  data() {
    return {
      banners: [
        'banner_0.jpeg',
        'banner_3.jpeg',
        'banner_2.jpeg',
      ],
      activeIndex: '/' // 默认激活的菜单项
    }
  },
}
</script>

<style scoped>
.el-menu {
  border-bottom: none; /* 如果不需要底部边框 */
}

.el-menu-item a {
  display: block; /* 使链接填满整个菜单项 */
  color: inherit; /* 继承颜色 */
}

.el-menu-item.is-active {
  border-bottom: 2px solid #42b983; /* 激活时的底部边框 */
}
.block {
  margin-top: 2px;
}
</style>
